<template>
    <RouterLink to="/AdminShowAllFinan">用户理财赎回列表</RouterLink>

    <h3>用户投资赎回列表</h3>
    <table class="table table-bordered">
        <thead>
            <tr style="background-color: aqua;">
                <td>投资项目编号</td>
                <td>投资项目名称</td>
                <td>投资项目总金额</td>
                <td>用户已投资金额</td>
                <td>剩余投资金额</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in data" :key="item.U_Id">
                <td>{{ item.I_Id }}</td>
                <td>{{ item.I_Name }}</td>
                <td>{{ item.I_Budget }}</td>
                <td>{{ item.I_Receive }}</td>
                <td>{{ item.I_Residue }}</td>
                <td><a href="#" @click="UserRedeemInvestPage(item.I_Id)">用户赎回明细</a></td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

//实例路由
const router = useRouter();

//创建响应对象接受返回的数据
const data = ref([{
    I_Id: 0,
    I_Name: '',
    I_Budget: '',
    I_Receive: '',
    U_Id: '',
    I_Residue: '',
    UI_Id: 0
}]);

//生命周期钩子
onMounted(() => {
    axios({
        method: "get",
        url: "https://localhost:44305/api/Invests/UserRedeemInvestInfo"
    })
        .then(function (res) {
            data.value = res.data;
        })
})


//跳转到用户投资赎回列表
const UserRedeemInvestPage = (Iid: number) => {
    router.push({
        name: 'AllUserRedeemInvestPage',
        params: { Iid: Iid }
    })
}

</script>